<template>
  <div class="bg-ff">
    <div class="setuptext">
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
      ></quill-editor>
    </div>
    <div class="margin-t80">
      <div class="sure bg-ff0 text-ff text-center letter-10" @click="sure">保存</div>
    </div>
  </div>
</template>

<script>
const toolbarOptions = [
  "bold",
  "italic",
  "underline",
  { indent: "-1" },
  { align: [] },
  { indent: "+1" },
  { header: 1 },
  { header: 2 },
  { size: ["12px", "14px", "16px", "18px", "20px", "24px", "36px"] }
  // { size: ['small', false, 'large', 'huge'] },
];

export default {
  data() {
    return {
      content: ``,
      editorOption: {
        placeholder: "请在这里输入",
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: () => {
                console.log(1);
              }
            }
          }
        }
      }
    };
  },
  mounted() {
    document.querySelector("html").style.backgroundColor = "#ffffff";
    this.content = this.$route.params.value;
  },
  methods: {
    sure() {
      let type = this.$route.params.type;
      let value = this.content;
      if (!value && this.$route.params.notnull == 1) {
        this.$toast("内容不能为空~");
        return false;
      }
      this.$axios
        .post("/wap/personal/editUserInfo", {
          token: window.localStorage.getItem("token"),
          key: type,
          value: value
        })
        .then(res => {
          this.$toast(res.data.msg);
          if (res.data.code == 0) {
            this.$router.go(-1);
          }
        });
    },
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange(e) {
      if (e.html.indexOf("&lt;a") >= 0 || e.html.indexOf("<a") >= 0) {
        this.content = this.content.replace(/(<\/?a.*?>)|(<\/?span.*?>)/g, "");
      }
    } // 内容改变事件
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  }
};
</script>

<style>
.setuptext .ql-editor {
  height: 4rem;
  min-height: 4rem;
}
</style>